<template>
    <div class="login-box">        
        
        <el-form style="max-width: 460px" 
            :model="data"
            :rules="rules"
         >
            <div style="margin: 20px" />
            <el-form-item >
                <el-input
                    class="w-50 m-2"
                    placeholder="请输入用户名"
                    :prefix-icon="User"
                    v-model="data.username"
                    prop="username"
                />
            </el-form-item>

            <el-form-item >
                <el-input class="w-50 m-2"
                    placeholder="请输入密码"
                    :prefix-icon="View"
                    v-model="data.userpass"    
                    prop="userpass"
                    type="password"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loginCheck" >登录</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { reactive, ref, } from 'vue';
import {User,View} from '@element-plus/icons-vue'

// 双向绑定表单元素的数据
interface IData{
    username:string,
    userpass:string
}

const data = reactive<IData>({
    username:"",
    userpass:""
})

// 验证表单元素输入内容的规则
const validateUserPass = (rule: any, value: any, callback: any) => {
    console.log("validateUserPass",validateUserPass);
    
  if (value === '') {
    callback(new Error('请输入密码'))
  }
}
const validateUsername = (rule: any, value: any, callback: any) => {
    console.log("validateUsername",validateUsername);
  if (value === '') {
    callback(new Error('请输入用户名'))
  }
}

const rules = reactive({
  username: [{ validator: validateUsername, trigger: 'blur' }],
  userpass: [{ validator: validateUserPass, trigger: 'blur' }],
})

let $router = useRouter();

function loginCheck() {
    console.log("data",data);
    
    // $router.push("/admin");
}

</script>

<style scoped>
.login-box {
    width: 100%;
    height: 100%;
    background: url(https://cas.1000phone.net/cas/images/login/bg.png) 50% no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.el-form{
    background-color: #fff;
    width: 400px;
    height: 200px;
    padding:20px;
}
</style>